<template>
	<view>
		<cu-custom bgColor="bg-blue" :isBack="true">
			<block slot="backText"></block>
			<block slot="content">班级管理</block>
		</cu-custom>
		<view class="box" style="display: flex;" v-for="(item,index) in formlist" :key='index' @tap="skip(item.class_id)">
			<view class="box_in">
				<view class="text">{{item.class_name}}</view>
				
			</view>
			<view style="width: 80%">
				<view class="iconfont icon-you1 icon"></view>
			</view>
			
		</view>
         <view style="padding: 100rpx;"></view>


		<view class="btn">
			<button class="button" @tap="showModal" data-target="bottomModal">创建班级</button>
		</view>

		<view class="cu-modal bottom-modal" :class="modalName=='bottomModal'?'show':''">
			<view class="cu-dialog" style="height: 700rpx;border-radius: 40rpx 40rpx 0 0;background-color: #FFFFFF;">
				<view class="bar" style="display: flex;">

					<view class="text-black" style="font-weight: bold;width: 100%;padding-top: 35rpx;">创建班级</view>
					<view class="iconfont icon-guanbi text-gray " style="padding-right: 35rpx;padding-top: 35rpx;"
						@tap="hideModal()"></view>
				</view>
				<view class="padding-xl" style="text-align: center;width: 100%;">
					<view class="input">
						<view class="text_b">班级:</view>
						<view class="text_c"> <input class="input_a" placeholder="请输入班级" v-model="class_name"></input>
						</view>
					</view>
					<view class="b_input">
						<view class="text_b">班主任:</view>
						<view class="text_c"> <input class="input_a" placeholder="请输入班主任姓名"></input> </view>
					</view>

					<view class="on_button">
						<button class="button_a" @click="addclass()">立即申请</button>
					</view>

				</view>
			</view>
		</view>


	</view>
</template>

<script>

	const {
		appLogin,
		httpGet,
		httpPost
	} = require("@/utils/common.js")
	export default {
		data() {
			return {
				modalName: null,
				page: 1,
				page_size: 20,
				class_name: '',
				formlist: [],
				

			}
		},
		onLoad() {
			appLogin((user_info) => {
				console.log(user_info)
				this.getclasslist()
			})


		},
		onReachBottom() {
			this.page++
			this.getclasslist()

		},
		methods: {
			showname(item) {
				this.class_name = item ? item.class_name : ''
				this.modalName = 'dio'
			},
			// 展示model
			showModal(e) {
				this.modalName = e.currentTarget.dataset.target
			},
			// 隐藏model
			hideModal(e) {
				this.modalName = null
			},
			// 获取班级列表
			getclasslist() {
				httpGet({
					url: '/api/school/class_list',
					data: {
						page: this.page,
						page_size: this.page_size
					}
				}).then(res => {
					console.log(res)
					this.formlist = this.formlist.concat(res.result.list);
				})

			},
			skip(class_id) {
				uni.navigateTo({
					url: 'class?class_id='+class_id
				})
			},
			// 添加班级列表
			addclass() {
				httpPost({
					url: '/api/school/class_save',					
					data:{
						class_name: this.class_name,	
					}  	
				}).then(res => {
					console.log(res)
					this.hideModal()
					this.showname()
					this.getclasslist()

				})

			}

		}
	}
</script>

<style>
	.box {
		background-color: #FFFFFF;
		height: 180rpx;
		border-bottom: 2rpx solid rgba(231, 231, 231, 0.8);
	}

	.box_in {
		display: inline;
		width: 50%;
		padding-top: 25rpx;
		margin-left: 30rpx;
	}

	.box_one {
		background-color: #FFFFFF;
		height: 180rpx;
		border-bottom: 2rpx solid rgba(231, 231, 231, 0.8);
	}

	.text {
		font-size: 32rpx;
		font-weight: 550;
		padding-top: 25rpx;
	}

	.text_a {
		padding-top: 15rpx;
		color: #666666;
		font-size: 28rpx;
	}

	.text_b {
		padding-left: 20rpx;
		text-align: left;
		font-size: 34rpx;
		line-height: 106rpx;
		width: 30%;
	}

	.text_c {

		line-height: 106rpx;
		width: 75%;
	}

	.input {
		background-color: #FFFFFF;
		border: 1rpx solid rgba(182, 182, 182, 0.5);
		display: flex;
		height: 106rpx;
		width: 100%;
		border-radius: 10rpx;
	}

	.b_input {
		background-color: #FFFFFF;
		border: 1rpx solid rgba(182, 182, 182, 0.5);
		display: flex;
		margin-top: 40rpx;
		width: 100%;
		height: 106rpx;
		border-radius: 10rpx;
	}

	.input_a {

		text-align: left;
		height: 102rpx;
	}

	.icon {
		color: #666666;
		font-size: 40rpx;
		text-align: right;
		padding-right: 34rpx;
		line-height: 175rpx
	}

	.btn {
		background-color: #FFFFFF;
		position: fixed;
		bottom: 0;
		width: 100%;
		text-align: center;
	}

	.on_button {
		text-align: center;
		margin-top: 108rpx;
	}

	.button {
		width: 90%;
		margin-top: 30rpx;
		margin-bottom: 50rpx;
		border-radius: 400rpx;
		background-color: #3085ff;
		color: #FFFFFF;
	}

	.button_a {
		width: 100%;
		border-radius: 20rpx;
		background-color: #3085ff;
		color: #FFFFFF;
	}

	.bar {

		font-size: 30rpx;
		background-color: #FFFFFF;
		text-align: center;
		width: 100%;
		height: 124rpx;
	}
	.text-black{
		margin-top: 50rpx;
	}
</style>
